<template>
  <el-card>
    <template #header>
      <el-button type="primary" icon="el-icon-plus">添加</el-button>
    </template>

    <el-table :data="trademarks">
      <el-table-column label="序号" type="index" align="center" width="100" />
      <el-table-column prop="tmName" label="品牌名称" />
      <el-table-column label="品牌LOGO">
        <!-- 
          在el-table-column组件内部有: 
          <slot :row="当前行数据对象" :$index="当前行的下标">
          -->
        <template v-slot="{ row }">
          <el-image style="width: 100px; height: 100px" :src="row.logoUrl" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
  
        <template v-slot="{row}">
          <el-button @click="showUpdate(row)" type="warning" icon="el-icon-edit" size="small">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
export default {
  name: "TrademarkList",
  data() {
    return {
      trademarks: [
        {
          id: 1,
          tmName: "小米",
          logoUrl: "/static/default.jpg",
        },
        {
          id: 2,
          tmName: "苹果",
          logoUrl: "/static/default.jpg",
        },
        {
          id: 3,
          tmName: "华为",
          logoUrl: "/static/default.jpg",
        },
      ],
    };
  },
  async mounted() {
    let result = await this.$API.trademark.getList(1, 3);
  },
};
</script>

<style lang="scss" scoped>
</style>
